<template>
	<article class="page page-website-important-info">
		<h4 class="text-center">网站敏感信息探测</h4>
		<form class="page-body" @submit.prevent="searchHandler">
			<div class="row">
				<div class="col-3 left">
					<fieldset>
						<legend>探测项目</legend>
						<div class="fieldset-content">
							<div class="form-group">
								<div class="input-group">
									<input class="form-control" type="text" v-model.trim="website" placeholder="输入域名，如：baidu.com" />
									<span class="input-group-text" @click="searchHandler"><i class="fa fa-search"></i></span>
								</div>
							</div>
							<div class="form-group project-list">
								<div v-for="(v,i) in projectList" :key="i"
									:class="['project-item', {active: i === projectActiveIndex}]"
									@click="itemClick(v,i)"
								>{{v.label}}</div>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="col-9 right">
					<fieldset>
						<legend>探测结果</legend>
						<div class="fieldset-content">
							<iframe v-if="iframeUrl" :src="iframeUrl" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox" referrerpolicy="no-referrer" @load="loadingCount=0"></iframe>
							<cmpWhois v-else-if="projectActive.value==='whois'" :data="dataActive"></cmpWhois>
							<cmpUrl v-else-if="projectActive.value==='url'" :website="baseUrl"></cmpUrl>
							<x-loading size="large" fix v-if="loadingCount>0"></x-loading>
						</div>
					</fieldset>
				</div>
			</div>
		</form>
	</article>
</template>

<script>
import cmpWhois from './whois.vue'
import cmpUrl from './url.vue'
let whois = global.whois || null

export default {
	name: 'website-important-info',
	components: {
		cmpWhois,
		cmpUrl
	},
	data () {
		return {
			projectList: [
				{label: 'Whois', value: 'whois', component: 'cmpWhois'},
				{label: 'Robots', value: 'robots', component: 'iframe'},
				{label: 'URL路径', value: 'url', component: 'cmpUrl'},
			],
			projectActiveIndex: -1,
			website: '',
			whoisDict: {},
			loadingCount: 0
		}
	},
	computed: {
		projectActive () {
			return this.projectList[this.projectActiveIndex] || {value: ''}
		},
		baseUrl () {
			let protocol = 'http://'
			let result = this.website
			while (/\/$/.test(result)) {
				result = result.substring(0, result.length - 1)
			}
			if (/^http/.test(result)) { protocol = '' }
			result = protocol + result
			return result
		},
		iframeUrl () {
			let result = ''
			switch (this.projectActive.value) {
				case 'robots':
					result = this.baseUrl + '/robots.txt'
					break
				default:
					break
			}
			return result
		},
		dataActive () {
			let result = {}
			switch (this.projectActive.value) {
				case 'whois':
					result = this.whoisDict[this.website] || {}
					break
				default:
					break
			}
			return result
		}
	},
	mounted () {
		whois = this.$sharedObject('whois')
	},
	methods: {
		searchHandler () {
			let index = this.projectActiveIndex > -1 ? this.projectActiveIndex : 0
			this.projectActiveIndex = -1
			this.itemClick(this.projectList[index] || {}, index)
		},
		itemClick (item, index) {
			if (!this.website) {return this.$toast('请输入域名后再试')}
			if (this.projectActiveIndex === index) return
			this.projectActiveIndex = index
			switch (item.value) {
				case 'whois':
					this.whoisHandler()
					break
				default:
					break
			}
		},
		whoisHandler () {
			let item = this.whoisDict[this.website] || {}
			if (!item.error && Object.keys(item).length) return
			whois(this.website).then((res) => {
				res = res || {}
				this.$set(this.whoisDict, this.website, res)
				if (res.error) {
					this.$toast('发生错误：' + res.error)
				}
			})
		},
	},
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-website-important-info {
	display: flex;
	flex-direction: column;
	fieldset {
		height: 100%;
		.fieldset-content {
			height: calc(100% - 2em);
			overflow: auto;
		}
	}
	.page-body {
		height: 0;
		flex-grow: 1;
		& > .row {
			height: 100%;
		}
		.left {
			height: 100%;
			.fieldset-content {
				display: flex;
				flex-direction: column;
			}
			.project-list {
				flex-grow: 1;
				padding: 0 1em;
				border-radius: .5em;
				color: #6c757d;
				background-color: @bgGrey;
				overflow: hidden auto;
				.project-item {
					padding: .5em 0;
					cursor: pointer;
					border-bottom: 1px dashed #bbb;
					&.active, &:hover {
						font-weight: 600;
						color: @colorWarning;
					}
				}
			}
		}
		.right {
			height: 100%;
			.fieldset-content {
				position: relative;
				border-radius: 0.5em;
			}
			iframe {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: .5em;
				background-color: @bgGrey;
			}
		}
	}
}
</style>
